  |
|
 |
|
|
|||||
 |
|
Die wichtigsten Objekte befinden sich auf der Registerkarte »Allgemein«, die in Abbildung 17.6 zu sehen ist. Im Folgenden werden die wichtigsten Objekte dieser Registerkarte der Palette beschrieben. Die ersten drei erzeugen einen Hyperlink, einen E-Mail-Hyperlink sowie einen Anker für seiteninterne Hyperlinks. Tabellen einfügenMit einem Klick auf den vierten Button der Allgemein-Registerkarte in der Einfügen-Palette rufen Sie den Tabellen-Dialog auf. Hier werden zunächst die grundlegenden Eigenschaften der Tabelle festgelegt, die natürlich später wieder geändert werden können. Sie entsprechen den weiter oben ausführlich beschriebenen HTML-Attributen des <table>-Tags. Zelleigenschaften Nachdem Sie die Eigenschaften der Tabelle eingestellt haben, können Sie durch Klick in die jeweilige Zelle deren Inhalt bearbeiten. Die Eigenschaften-Leiste enthält dabei im oberen Bereich die üblichen Textoptionen beziehungsweise andere Einstellungen, falls anderer Inhalt bearbeitet wird. In der unteren Hälfte befinden sich dagegen die Einstellmöglichkeiten für die Attribute der Zelle, die ebenfalls ihren HTML-Entsprechungen nachempfunden sind. Links im unteren Bereich der Eigenschaften-Leiste befinden sich unter dem Begriff Zelle zwei Buttons für das Aufteilen einer Zelle in mehrere beziehungsweise das Vereinen mehrerer Zellen zu einer. Die rowspan- beziehungsweise colspan-Attribute der entsprechenden Zellen werden automatisch eingestellt. Wenn Sie die Eigenschaften der gesamten Tabelle bearbeiten möchten, können Sie den Rand der Tabelle mit der Maus anklicken. Durch Ziehen der Anfasser am rechten Rand, am unteren Rand und an der rechten unteren Ecke der Tabelle kann die Höhe beziehungsweise Breite der Tabelle festgelegt werden. Die Buttons in der Eigenschaften-Leiste ermöglichen anschließend die Konvertierung der Größenangaben in Pixel beziehungsweise Prozent. Das Löschen dieser Werte beziehungsweise der Klick auf die entsprechenden Buttons entfernt die festgelegten Angaben wieder. Bilder einfügenIn der Allgemein-Registerkarte folgt auf den Button zum Einfügen von Tabellen der Button Ebene zeichnen, der zum Aufziehen von DHTML-Layers verwendet werden kann. Diese Funktion wird weiter unten näher beschrieben. Bilder und ihre Optionen Mit Hilfe der nächsten drei Buttons werden auf verschiedene Weise Bilder eingesetzt. Ein Klick auf den Button Bild öffnet den Dialog Bildquelle auswählen. Dort kann ein Bild aus dem lokalen Dateisystem gewählt werden. Sinnvollerweise sollte das Bild natürlich im selben Ordner liegen wie das Dokument, wahlweise kann es auch in einem Unterordner oder zumindest innerhalb der Hauptordnerhierarchie der geplanten Website liegen. Eventuell müssen Sie es in einen dieser Ordner kopieren, bevor Sie es einbetten. Nachdem ein Bild geladen ist, können Sie im oberen Teil der Eigenschaften-Leiste seine wichtigsten Eigenschaften einstellen, zum Beispiel die Breite oder Höhe des Bildes, einen Alternativtext und so weiter. Im unteren Bereich können Sie mit Hilfe intuitiv verständlicher grafischer Werkzeuge eine Image Map anlegen, indem Sie mit den entsprechenden Werkzeugen die drei Arten von Hotspots auf dem Bild aufziehen und ihnen anschließend Hyperlink-URLs und andere Eigenschaften zuweisen. Der nächste Button fügt einen Bildplatzhalter ein. Dieser definiert einen leeren, benannten Anzeigeplatz für ein Bild. Geeignet sind solche Platzhalter für JavaScript-Funktionen, die automatisch wechselnde Bilder an einer solchen Position anzeigen können. Fireworks HTML Der nächste Button, Fireworks HTML, dient zur Einbindung einer automatisch von Fireworks erzeugten HTML-Datei an einer bestimmten Stelle im Dokument, die Segmente, Rollovers und andere Funktionen definiert. HTML-Dateien, die nicht in Fireworks erstellt wurden, werden als solche erkannt und zurückgewiesen. Der Vorteil besteht darin, dass die umgebenden HTML-Elemente der Fireworks-Seite automatisch entfernt werden. Es wird lediglich der relevante Bild- und Funktionsinhalt übernommen. Flash einbetten Der Button Flash dient zum Einbetten einer komprimierten .swf-Datei, also einem für das Web optimierten Flash-Film und dem Einstellen seiner Eigenschaften. Diese Eigenschaften werden in Kapitel 20 genau erläutert. Mit Hilfe des nächsten Buttons wird ein Rollover-Bild eingefügt. Im Gegensatz zum normalen Bild müssen zwei verschiedene Bild-URLs angegeben werden. Außerdem kann über Rollover-Bild vorausladen erzwungen werden, dass das Austauschbild bereits vor der ersten Mausberührung geladen wird; dies ist dringend zu empfehlen. Im Übrigen muss ein eindeutiger Name für das Bild eingegeben werden, weil die automatisch erzeugte JavaScript-Programmierung ihn zur Identifikation des Bildes verwendet. Navigationsleisten erstellen Der Button Navigationsleiste baut automatisch eine Leiste aus mehreren Rollover-Bildern mit Hyperlink-Funktion auf. Sie benötigen für jeden Menüpunkt mindestens zwei Bilder (besser drei oder vier), um die vier Zustände Up-Bild (Bild wird nicht berührt), Over-Bild (Mauszeiger berührt das Bild), Down-Bild (Maustaste gedrückt) und eventuell auch noch das Over bei Down-Bild (mit bereits gedrückter Maustaste berühren) zu definieren. Der erste Menüpunkt ist beim Aufruf des Dialogs bereits eingetragen, allerdings sollten Sie seinen Namen dem Verwendungszweck anpassen. Weitere Menüpunkte werden mit Hilfe des Plus-Buttons oben links hinzugefügt, entfernt werden Punkte mit dem daneben liegenden Minus-Knopf. Rechts daneben liegen zwei Schaltflächen, um den ausgewählten Menüpunkt weiter nach vorn beziehungsweise nach hinten im Menü zu verschieben. Unter dem Punkt Wenn angeklickt, gehe zu URL wird die URL angegeben, zu der der Link führen soll; die Auswahl unter in ermöglicht die Definition des Frames oder Fensters, in das der Link geladen werden soll. Zu guter Letzt können Sie ganz unten unter Einfügen die grundsätzliche Aufbaurichtung der Menüleiste wählen (horizontal oder vertikal). Beachten Sie, dass diese Entscheidung endgültig ist, sie kann im Nachhinein nicht mehr geändert werden. Alle anderen Aspekte der Navigationsleiste können Sie später mittels Modifizieren . Navigationsleiste ändern. Das nächste Element in der Allgemein-Registerkarte ist eine Trennlinie, deren Optionen bereits im HTML-Abschnitt erläutert wurden. Der Button Datum fügt das aktuelle Datum und/oder die Uhrzeit in einem wählbaren Format ein. Die Option Beim Speichern automatisch aktualisieren sorgt dafür, dass bei jedem Speichern des Dokuments die aktuellen Werte eingetragen werden. Dies ist besonders nützlich für »Zuletzt geändert«-Angaben. Die Schaltfläche Tabellendaten importiert eine beliebige Textdatei und formatiert ihren Inhalt als Tabelle. Die Zellen werden an einem frei wählbaren Trennzeichen unterteilt, die Zeilen orientieren sich jeweils an Zeilenumbrüchen. Mittels Kommentar können Sie einen HTML-Kommentar einfügen. Der letzte Button auf der Registerkarte ist die Tag-Auswahl. Sie bietet Anwendern, die mit HTML vertraut sind, die Möglichkeit, HTML-Tags anhand ihres Namens auszuwählen und einzufügen, wobei die verschiedenen Attributwerte im Dialog erfragt werden. Unter Tag-Info werden dieselben Informationen über HTML-Tags angeboten wie in der Referenz-Palette, die in Zusammenarbeit mit O'Reilly&Associates erstellt wurde. Neben HTML sind hier auch Tags und Befehle anderer Sprachen übersichtlich angeordnet, insbesondere für serverseitige Skriptsprachen wie ASP-NET, JSP, ColdFusion und PHP. Arbeiten in der LayoutansichtMit Hilfe der Registerkarte Layout in der Einfügen-Palette können Sie zwischen zwei Dokument-Ansichten umschalten, der Standardansicht und der Layoutansicht. In der Layoutansicht können mit Hilfe der beiden entsprechenden Buttons spezielle flexible Tabellen und Zellen erzeugt werden, die Layouttabellen und Layoutzellen. Nach einem Klick auf die jeweilige Schaltfläche können Sie das Element an einer beliebigen Stelle im Dokument aufziehen Die Layoutzellen sind innerhalb der Layouttabelle frei verschieb- und skalierbar. Nach dem Zurückschalten in die Standardansicht wird die Layouttabelle zu einer (manchmal ziemlich komplexen) normalen Tabelle, kann aber durch erneutes Umschalten in die Layoutansicht wieder bequem bearbeitet werden. In der oberen Leiste der Layouttabelle steht für die einzelnen Spalten in »Optionen« ein Popup-Menü zur Verfügung: Um die Breite einer Spalte unverrückbar festzulegen, können Sie Platzhalterbild hinzufügen auswählen. Die Option Spalte automatisch strecken entfernt dagegen die feste Breitenangabe einer Spalte, sodass sich ihre Breite automatisch aus der Tabellenbreite und der Breite des Browserfensters ergibt. Um die Eigenschaften einer bestimmten Layoutzelle oder der gesamten Layouttabelle in der Eigenschaften-Leiste zu editieren, müssen Sie sie an ihrem Rand anklicken, um sie zu markieren. Die wichtigsten Einstellungen sind die Hintergrundfarben der Tabelle und der Zellen sowie die Zellauffüllung (der Innenabstand) und der Zellraum (Außenabstand) für die Tabelle. FormulareHTML-Formulare werden in Dreamweaver mit Hilfe der Registerkarte Formulare in der Einfügen-Palette erstellt. Tabelle 17.1 zeigt eine kurze Übersicht aller angebotenen Formularelemente in ihrer Reihenfolge; die Optionen wurden bereits im HTML-Abschnitt genau erläutert.
Näheres über die Funktionsweise und die Eigenschaften von Formularen und ihren Elementen finden Sie in Kapitel 16, HTML und XHTML. Mit Frames arbeitenAuf der Registerkarte Frames der Einfügen-Palette finden Sie verschiedene Buttons, um zu der existierenden Datei ein Frame hinzuzufügen. Der cyanfarbene Bereich repräsentiert dabei das aktuelle Dokument; die weißen Bereiche werden als neue Frames hinzugefügt. Frameset-Dateien Beachten Sie, dass beim Hinzufügen eines Frames zu einer Einzeldatei, die noch keine Frames enthält, zwei neue Dateien erzeugt werden: die Datei, die in das neue Frame hineingeladen wird, sowie die Frameset-Definitionsdatei. Aus diesem Grund stehen im Menü Datei anschließend die komfortablen neuen Funktionen Frameset speichern (unter...) beziehungsweise Frame speichern (unter...) zur Verfügung. Das Einstellen der Frameset- und Frame-Eigenschaften ist ein wenig unübersichtlich verteilt: Wenn Sie den Rand des Framesets im Dokumentfenster anklicken, stehen in der Eigenschaften-Palette die Optionen für das Frameset zur Verfügung. Ganz rechts in der Eigenschaften-Leiste befindet sich ein Frame-Wähler. Wenn Sie darin eines der Frames anklicken, können Sie diejenigen Eigenschaften dieses Frames einstellen, die im <frameset>-Tag definiert werden, insbesondere seine Breite und Höhe. Frame-Eigenschaften Wenn Sie dagegen die Eigenschaften eines Frames selbst einstellen möchten, beispielsweise seinen Namen oder die Möglichkeit zur nachträglichen Größenänderung, können Sie mit gedrückter (ALT)-Taste in das entsprechende Frame klicken. Alternativ können Sie die Palette Frames zu Hilfe nehmen, die über Fenster . Andere . Frames beziehungsweise (Shift) + (F2) aufgerufen wird. Hier können Sie in die symbolische Darstellung der einzelnen Frames hineinklicken, um ihre Optionen einzustellen. Um wieder das Frameset zu bearbeiten, können Sie auch in dieser Palette auf seinen Rand klicken.  17.3.3 Website-Funktionen
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
Den Namen der Website. |
|
|
Wird serverseitige Programmierung (ASP.NET, JSP, PHP und so weiter) verwendet? Wenn ja, welche Sprache? |
|
|
Sollen die Dateien der Site während der Bearbeitung auf dem lokalen Rechner, auf einem Server im lokalen Netzwerk oder auf dem Server des Providers liegen? Üblicherweise wird hier der lokale Rechner gewählt. Zusätzlich muss das Verzeichnis angegeben werden, in dem die Site gespeichert werden soll. |
| Im Übrigen wird hier der lokale Ordner gewählt, in dem die Dateien der Site gespeichert werden. Falls dieser Ordner bereits Dokumente enthält, werden diese in der Site-Ansicht angezeigt. | |
|
|
Wie soll die Verbindung zum entfernten Server hergestellt werden? Die häufigste Wahl, die von den meisten Providern unterstützt wird, ist FTP. Falls Sie eine Verbindung wählen, müssen Sie an dieser Stelle die genauen Zugangsdaten eingeben, die Sie von Ihrem Webhoster erfahren haben sollten. |
|
|
Wenn im vorigen Schritt eine Verbindung eingerichtet wurde, können Sie nun auf Wunsch das Auschecken aktivieren. Dies verhindert bei einer Website, die von mehreren Personen bearbeitet wird, dass dasselbe Dokument gleichzeitig an zwei Stellen modifiziert wird. |
|
|
Zum Schluss wird eine Zusammenfassung angezeigt. Wenn alles in Ordnung ist, können Sie auf Fertig klicken. |
Auf der Registerkarte Erweitert können Sie dagegen alle Einstellungen in beliebiger Reihenfolge und mit erheblich mehr Optionen vornehmen.
Site-Verwaltung
Nachdem die Site definiert ist, erscheint in der Palette Site (Fenster . Site oder (F8)) ein Ordner mit dem Namen der Site, den Sie aufklappen können, um die Dateien der Site zu bearbeiten oder neu zu erstellen. Im separaten Menü Ansicht dieser Palette können Sie von Site-Dateien auf Sitemap umschalten, dazu muss zunächst eine Datei als Homepage ausgewählt werden: Klicken Sie die Datei mit der rechten Maustaste an (auf dem Mac (CTRL) + Klick) und wählen Sie Als Homepage festlegen aus.
Die Sitemap zeigt eine Baumansicht aller Link-Beziehungen der Website an. Die Wurzel dieses Baums bildet die soeben angelegte Homepage. Im Ansicht-Menü der Palette können Sie optional Seitentitel anzeigen einblenden, um statt der Dateinamen die Titel zu sehen.
In beiden Ansichten kann jede Datei per Doppelklick zum Bearbeiten geöffnet werden; ansonsten funktionieren auch Verschieben, Löschen oder Umbenennen ähnlich wie in der Dateiverwaltung des Betriebssystems.
Eine interessante Funktion übernimmt die Palette Elemente (Fenster . Elemente oder (F11)) in Dreamweaver: Sie enthält in verschiedenen Kategorien alle Objekte, die innerhalb des Site-Ordners liegen beziehungsweise bereits auf der Site verwendet wurden. Im Einzelnen handelt es sich um Bilder, um die bereits verwendeten Farben, alle externen URLs, Flash-Filme, Shockwave-Filme, Video-Filme, Skripte (verwendete JavaScript-Elemente) und Vorlagen. Von jedem angeklickten Element wird eine Vorschau gezeigt; per Drag and Drop kann es an einer bestimmten Stelle auf einer Seite verwendet werden.
Die Bibliothek
Besonders interessant ist die unterste Kategorie, die so genannte Bibliothek: Hierhin können Sie beliebige Auswahlen aus einem Dokument ziehen und mit einem Namen versehen. Diese benannten Elemente können Sie wiederum an eine beliebige Stelle in Dokumenten ziehen, um sie anzuwenden. Wenn Sie ein Bibliothekselement doppelklicken, können Sie es nachträglich bearbeiten - es ist eine separate Datei mit der Endung .lbi (für »Library Item«). Wenn Sie es speichern, werden alle Stellen aktualisiert, an denen Sie es verwendet haben.
Eine Vorlage ist ein spezielles Dokument mit der Dateiendung .dwt (»Dreamweaver Template«), das eine Mischung aus festgelegten und austauschbaren Bereichen enthält. In einer Vorlage werden bearbeitbare Bereiche angelegt, in denen sich auf jeder Seite anderer Inhalt befinden kann. Werden die Inhalte der Vorlage außerhalb der bearbeitbaren Bereiche nachträglich geändert, dann werden diese auch auf den Seiten, die diese Vorlage verwenden, automatisch aktualisiert, natürlich mit Sicherheitsabfrage.
Hinter den Kulissen realisiert Dreamweaver die Verwendung der Vorlage auf den Einzelseiten durch HTML-Kommentare, die die bearbeitbaren Bereiche von den festgelegten abgrenzen. Sie können sowohl in der Entwurfs- als auch in der Codeansicht nur innerhalb der bearbeitbaren Bereiche arbeiten.
Vorlagen definieren
Eine Vorlage wird folgendermaßen definiert:
| 1. | Sie sollten bereits eine Site definiert und ausgewählt haben - Vorlagen werden immer pro Site angelegt und in dem speziellen Ordner Templates im Site-Ordner abgespeichert. |
| 2. | Wählen Sie Datei . Neu. |
| Die passende Kategorie ist Einfache Seite, als Seitentyp müssen Sie rechts HTML-Vorlage auswählen. | |
| 3. | Erstellen Sie nun alle Inhalte, die auf jeder Seite gleich aussehen sollen, direkt auf der Vorlagen-Seite. |
| 4. | Auf der Registerkarte Vorlagen der Einfügen-Leiste können Sie nun verschiedene Optionen für Austauschbereiche finden. Die wichtigste ist ein einfacher Bearbeitbarer Bereich, den Sie mit Klick auf den dritten Button in der Leiste an der aktuellen Position auf der Seite einfügen. Anschließend muss ein Name für diesen Bereich festgelegt werden. |
| Wenn Sie auf jeder Einzelseite selbst bestimmen möchten, wie die Inhalte des bearbeitbaren Bereichs formatiert werden sollen, dürfen Sie nun keinerlei Formatierung am Inhalt dieses Bereichs vornehmen. Sobald Sie ein Absatzformat wie Absatz oder Überschrift 1 und so weiter anlegen, bleiben Sie in diesem einen Absatz gefangen; bei der Verwendung von Schriftformatierung sind Sie sogar noch weiter eingeschränkt. | |
| 5. | Zu guter Letzt können Sie nun die Vorlage speichern. Für eine Site können beliebig viele Vorlagen angelegt werden. |
Nun können Sie eine Seite erstellen, die von einer Vorlage abhängt: Wählen Sie wieder Datei . Neu... und wechseln Sie in dem Dialog auf die Registerkarte Vorlagen. Wählen Sie hier die passende Vorlage aus und drücken Sie (OK).
HTML-Stile sind eine angenehme Art und Weise, verschiedene HTML-Schrift- und Absatzformatierungen dauerhaft abzuspeichern und einfach anzuwenden.
Sie werden in der Palette HTML-Stile (Fenster . HTML-Stile) angelegt und verwaltet; gespeichert werden sie mit dem Programm, nicht mit der einzelnen Seite oder Site, sodass sie über beliebig viele Dokumente hinweg zur Verfügung stehen.
Um einen neuen Stil anzulegen, klicken Sie auf den Plus-Button rechts unten in der Palette, oder wählen Sie Neu... aus dem Popup-Menü rechts oben in der Palette. Es erscheint ein Dialog, in dem die folgenden Einstellungen für einen Stil vorgenommen werden können:
|
|
Name: Geben Sie hier einen sinnvollen, beschreibenden Namen für den Stil ein. |
|
|
Anwenden auf: Hier können Sie zwischen einem Absatz- und einem Auswahl-Stil wählen; Letzterer wird auf beliebige ausgewählte Zeichen angewandt. |
|
|
Beim Anwenden: Wenn Sie hier Zu vorhandenem Stil hinzufügen auswählen, bleiben alle Einstellungen, die in diesem Stil nicht explizit vorgenommen werden, so, wie sie vor der Anwendung dieses Stils waren. Vorhandenen Stil löschen setzt dagegen vor der Anwendung sämtliche Einstellungen des Textes, auf den der Stil angewendet wird, auf neutral zurück: Nur, was in diesem Stil individuell eingestellt wurde, steht überhaupt als besondere Einstellung im späteren HTML-Code. |
| Angenommen, Sie legen zum Beispiel einen Auswahl-Stil namens nurfett an, der als einzige konkrete Einstellung ein B (fett) definiert. Bei diesem Stil wird Vorhandenen Stil löschen angekreuzt. Der Stil auchfett erhält ebenfalls nur ein B, aber die Einstellung Zu vorhandenem Stil hinzufügen. In der Liste ist diese Besonderheit von auchfett am kleinen Pluszeichen hinter der Stilart (¶ für Absatz, a für Auswahl) zu erkennen. | |
| Wenn Sie nun den Stil nurfett auf Zeichen anwenden, verlieren diese sämtliche individuellen Einstellungen (Schriftart, -größe, -farbe und so weiter) und werden nur noch fett dargestellt, wohingegen eine Anwendung von auchfett den Text zusätzlich zu seinen sonstigen Besonderheiten fett setzt. | |
|
|
Unter Schriftattribute werden Einstellungen für die Schriftart, Schriftgröße, Farbe, fett und kursiv vorgenommen sowie Andere... für weitere Zeichenattribute. |
|
|
Absatzattribute sind nur bei Absatzformaten aktiv und bestimmen die Optionen für die Absatzformatierung. |
Sie können HTML-Stile nachträglich ändern, indem Sie Bearbeiten aus dem Popup-Menü der Palette auswählen. Beachten Sie, dass sich die Stellen, an denen der Stil angewandt wurde, dadurch nicht automatisch ändern - es wird keine dauerhafte Verknüpfung zwischen den definierten HTML-Stilen und dem Dokument erzeugt. Für eine solche Beziehung sind nur CSS-Stile geeignet.
Die Einrichtung und Verwendung von Stylesheets funktioniert in Dreamweaver recht einfach. Zuständig ist die Palette CSS-Stile, die über Fenster . CSS-Stile oder (Shift) + (F11) aufgerufen wird.
Ganz unten in dieser Palette können Sie mit dem zweiten Button von links, Neuer CSS-Stil, eine Stylesheet-Formatierung einrichten. Es erscheint ein Dialog, in dem Sie verschiedene Einstellungen vornehmen können:
|
|
Als Erstes wird der Typ des Stylesheets festgelegt: Ein benutzerdefinierter Stil oder eine Klasse wird in der Liste der CSS-Palette erscheinen und kann einem Absatz oder ausgewählten Zeichen einzeln zugewiesen werden. Beachten Sie, dass der Name der Klasse mit einem Punkt beginnen muss, zum Beispiel kann er .test lauten. |
| HTML-Tag neu definieren legt das grundsätzliche Aussehen für ein bestimmtes HTML-Tag fest, das Sie aus der Liste auswählen können. Spätestens hier haben Sie es auch in Dreamweaver mit den Original-HTML-Namen der Tags zu tun - um Stylesheets zu verwenden, müssen Sie also beispielsweise wissen, dass p ein Absatz oder h1 eine Hauptüberschrift ist. Die Tag-Definitionen erscheinen später nicht in der CSS-Palette, weil sie den entsprechenden Tags ohnehin automatisch zugewiesen werden. | |
| CSS-Selektor verwenden bietet schließlich den Zugriff auf die vier Zustände von Hyperlinks, die weiter oben im CSS-Abschnitt besprochen wurden. | |
|
|
Unter Definieren in wird festgelegt, ob die CSS-Formate in einer externen Datei oder innerhalb der lokalen Datei gespeichert werden sollen. Wenn Sie sich das erste Mal für eine externe Datei entscheiden, müssen Sie sie im nächsten Schritt speichern. Beim nächsten CSS-Stil, den Sie anlegen, steht diese Datei dann automatisch zur Auswahl. |
| Wenn Sie später eine neue Seite erstellen, können Sie auf die externe Stylesheet-Datei zugreifen, indem Sie den Button ganz links unten in der CSS-Palette, Stylesheet anfügen, auswählen. Im entsprechenden Dialog könenn Sie zwischen Verknüpfung und Import wählen. Letzterer bindet die externe CSS-Datei nicht per <link>-Tag ein, sondern übernimmt ihren Datenbestand in die Seite selbst. Das bedeutet allerdings, dass sich die CSS-Formate auf dieser Seite nicht mehr automatisch mit der externen Datei ändern. | |
Die eigentlichen Stile definieren
Nachdem Sie festgelegt haben, was für ein Stylesheet Sie definieren möchten, gelangen Sie in einen umfangreichen Dialog, in dem die einzelnen Formatierungen vorgenommen werden. Links finden Sie verschiedene Kategorien, rechts die konkreten Einstellungen. Im Großen und Ganzen sind die Optionen selbsterklärend. Beachten Sie aber bitte, dass Dreamweaver manche Einstellungen, die er anbietet, selbst nicht anzeigen kann. Beispielsweise sehen Sie erst im Browser den ausgewählten Stil von Rahmenlinien; Dreamweaver zeigt immer durchgezogene Linien an.
Wie bereits erwähnt werden Tag- und Selektor-Definitionen den Elementen automatisch zugewiesen. Um einem Absatz einen speziellen Stil zuzuweisen, klicken Sie die gewünschte Klasse einfach in der CSS-Palette an. Dasselbe gilt für markierten Text, der bei Zuweisung einer CSS-Klasse automatisch mit <span> ... </span> umschlossen wird.
Wenn Sie CSS-Definitionen ändern möchten, müssen Sie Stylesheet bearbeiten aus dem Paletten-Popup auswählen. Es öffnet sich ein Dialog, in dem Sie die internen Stylesheets oder die verknüpfte CSS-Datei zum Bearbeiten auswählen können.
Dreamweaver ist in der Lage, automatisch Dynamic HTML (eine Kombination aus JavaScript und CSS) für bestimmte grundlegende Verhaltensweisen zu schreiben. Grundlage dieser Funktionen sind vor allem die Layers (DHTML-Ebenen), die durch <div>-Tags mit einer einmaligen, eindeutigen Bezeichnung gebildet werden.
In Kapitel 19 lernen Sie, solche Skripte von Hand zu schreiben - unter anderem werden Sie bemerken, wie schwierig es ist, den unterschiedlichen Browserversionen gerecht zu werden. Glücklicherweise bemerkt ein automatisch erzeugtes Dreamweaver-Skript selbst, in welchem Browser es gerade läuft, und verhält sich entsprechend.
Klicken Sie auf den fünften Button in der Einfügen-Palette, Registerkarte Allgemein und ziehen Sie an der gewünschten Stelle im Dokument einen Rahmen auf. Diese Funktion erzeugt ein unabhängig über die CSS-Eigenschaften position, top und left positioniertes <div>-Objekt. In der Entwurfsansicht wird es in zwei separaten Teilen angezeigt: Ein kleines gelbes Anker-Element zeigt an, wo die Definition der Ebene im HTML-Code steht; ein Rahmen stellt die Ebene selbst dar. Ein Klick auf das Anker-Element oder das kleine Quadrat links oben über dem Ebenenrand ermöglicht das Einstellen der Layer-Optionen in der Eigenschaften-Leiste. An Letzterem können Sie den Layer auch ziehen, um seine Position zu ändern.
Layer-Eigenschaften
Geben Sie dort als Ebenen-ID einen eindeutigen Namen ein. Die anderen wichtigen Einstellungen sind Position, Größe, Z-Index (Stapelreihenfolge) und Sichtbarkeit (Sie können eine Ebene über »Verhalten« ein- und ausblenden).
Verhalten sind automatisch erstellte JavaScript-Anweisungen, die bestimmte dynamische Veränderungen durchführen. Sie werden in der gleichnamigen Palette (Fenster . Verhalten oder (Shift) + (F3)) zugewiesen.
Wenn beim Erstellen eines Verhaltens nichts ausgewählt ist, wird ein automatisch auszuführendes Body-Verhalten erstellt. Ansonsten können Sie einen Link auswählen, wodurch ein Verhalten erzeugt wird, das auf eine Mausaktion am Hyperlink (Anklicken, Darüberrollen und so weiter) reagiert. Schließlich können Sie auch noch einem Formularelement ein Verhalten zuweisen.
Mit dem Plus-Button in der Verhaltens-Palette kann ein neues Verhalten für die aktuelle Auswahl erstellt werden. Wichtige Verhalten sind zum Beispiel folgende:
|
|
Ebenen ein-/ausblenden: Ein durch seinen (in der Liste auswählbaren) Namen gekennzeichneter Layer kann ein- beziehungsweise ausgeblendet werden. |
|
|
Ebene ziehen: Ein ausgewählter Layer kann mit gedrückter Maustaste gezogen werden. |
|
|
Zeitleiste: eine Aktion auf der Zeitleiste (siehe unten) starten. |
|
|
Gehe zu URL: durch das gewählte Ereignis zu einer bestimmten URL springen. |
|
|
Browserfenster öffnen: ein neues, angepasstes Fenster mit einstellbaren Eigenschaften öffnen. |
|
|
Text definieren: Sie können den Text eines Layers oder in der Statusleiste des Browserfensters dynamisch ändern. |
|
|
JavaScript aufrufen: Eine selbst definierte JavaScript-Funktion wird aufgerufen. Wie Sie solche Funktionen schreiben können, erfahren Sie in Kapitel 19, JavaScript. |
Ereignisse definieren
Nach Auswahl eines Verhaltens und Einstellung seiner Eigenschaften in einem jeweils speziellen Dialog müssen Sie in der Verhaltens-Palette in der Zeile des neuen Verhaltens das Popup-Menü öffnen, um zu wählen, von welchen Ereignissen dieses Verhalten abhängen soll.
Bei Body-Verhalten stehen beispielsweise folgende Ereignisse zur Verfügung:
|
|
onLoad: Die Seite wird gerade geladen. |
|
|
onUnload: Die Seite wird gerade verlassen. |
Bei Links können Sie zum Beispiel diese Ereignisse wählen:
|
|
onMouseOver: Der Mauszeiger hat soeben den Link berührt. |
|
|
onMouseOut: Der Mauszeiger hat den Link wieder verlassen. |
|
|
onClick: Die Maustaste wurde gerade gedrückt. |
Für Formularelemente (vor allem Textfelder) sind etwa folgende Ereignisse abrufbar:
|
|
onFocus: Das Element wurde gerade aktiviert, zum Beispiel durch (TAB) oder Mausklick. |
|
|
onBlur: Das Element wurde gerade verlassen, weil ein anderes aktiviert wurde. |
Die Zeitleiste bietet die Möglichkeit, eine zeitlich definierte Abfolge von Verhalten zu definieren, beispielsweise kann ein Layer animiert werden. Sie öffnen die Zeitleiste über Fenster . Andere . Zeitleisten oder (ALT) + (F9). Sie sieht fast so aus wie das Drehbuch in Director (Kapitel 10, Multimedia).
Mehrere Zeitleisten
Falls mehrere unabhängige zeitgesteuerte Verhaltensweisen auftreten sollen, müssen Sie Zeitleiste hinzufügen aus dem Optionen-Popup rechts oben in der Palette auswählen, um eine weitere Zeitleiste einzurichten - alle auf einer Zeitleiste definierten Ereignisse finden auf jeden Fall gleichzeitig statt. Links oben befindet sich ein Popup-Menü, mit dem Sie zwischen den verschiedenen einzelnen Zeitleisten wechseln können.
Mit Objekt hinzufügen aus dem Optionen-Popup wird der aktuell angeklickte Layer aus der Palette Ebenen (Fenster . Andere . Ebenen oder (F2)) in die Zeitleiste gesetzt.
Der Balken bestimmt Anfangszeitpunkt und Endzeitpunkt des Layers. Mit Schleife läuft die Zeitleiste in einer Schleife ab. Auto-Wdg. fügt ein onLoad-Verhalten zum Body hinzu, um diese Zeitleiste sofort nach dem Laden der Seite abzuspielen. Wenn Sie die Zeitleiste manuell starten möchten, müssen Sie einem entsprechenden Link das Verhalten Zeitleiste; Zeitleiste abspielen zuweisen.
Unter bps wird die Abspielgeschwindigkeit »Bilder pro Sekunde« eingestellt.
An jeder Stelle, an der sich im Balken ein runder Punkt (Keyframe oder Schlüsselbild genannt) befindet, können Sie die Position des Layers explizit einstellen. Die Zwischenpositionen entstehen durch Tweening (automatisches Berechnen der Zwischenbilder). Anfangs befinden sich automatisch am Anfang und am Ende des Balkens Schlüsselbilder; weitere lassen sich aus dem Popup über Schlüsselbild hinzufügen einrichten.
| << zurück |
| ||||||||||||
| ||||||||||||
| ||||||||||||
| ||||||||||||
| ||||||||||||
| ||||||||||||
| ||||||||||||
| ||||||||||||
| ||||||||||||
| ||||||||||||
| ||||||||||||
Copyright © Galileo Press GmbH 2004
Für Ihren privaten Gebrauch dürfen Sie die Online-Version natürlich ausdrucken. Ansonsten unterliegt das <openbook> denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.
